<template>
  <div v-loading.fullscreen.lock="loading" element-loading-text="正在处理中……"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row class="container">
      <el-col :span="24" class="header">
        <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
          {{sysName}}<span class="title_">小程序后台</span>
        </el-col>
        <el-col :span="10">
          <div class="tools" @click.prevent="collapse">
            <i class="fa fa-align-justify"></i>
          </div>
        </el-col>
        
        <el-col :span="4" class="userinfo">
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner"><!-- <img :src="this.sysUserAvatar" /> {{sysUserName}} -->
              <i class="el-icon-setting" style="color:#fff"></i>设置
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="openEdit">修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>
      <el-col :span="24" class="main">
        <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
            <el-menu :default-active="$route.path" background-color="#1F2D3D" text-color="#fff" active-text-color="#20a0ff" router >
              <i v-for="(item,i) in $router.options.routes[3].children" :key="item.name" >
                <el-menu-item :index="item.path + ''">
                  <i :class="item.icon"></i>
                  <span style="font-style: normal">{{item.name}}</span>
                </el-menu-item>
              </i>
            </el-menu>
        </aside>
        <section class="content-container">
          <div class="grid-content bg-purple-light">
            <el-col :span="24" class="content-wrapper">
              <transition name="fade" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
        </section>
      </el-col>
      <el-dialog title="修改密码" width="30%" :visible.sync="isShow">
        <el-form label-position="left" label-width="80px" :model="pwdModel" ref="pwdModel" >
          <el-form-item label="用户名" prop="userName" :rules="filter_rules({required:true})">
            <el-input v-model="pwdModel.userName" ></el-input>
          </el-form-item>
          <el-form-item label="新密码"  prop="old" :rules="filter_rules({required:true})">
            <el-input type="password" v-model="pwdModel.old" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="new" :rules="filter_rules({required:true})">
            <el-input type="password"  v-model="pwdModel.new" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="validate('pwdModel')" type="primary">确定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { mapActions,mapState } from 'vuex' 
export default {
	data() {
		return {
			sysName:'颜姿',
			collapsed:false,
			isShow: false ,
      pwdModel : {},
      loading : false 
		}
	},
	methods: {
		...mapActions(['loginAction']),
		logout : function (){
			this.loginAction(0);
			this.$router.push({ path: '/' });
		},
		closeDialog : function () {
			this.pwdModel = {};
			this.isShow = false ;
		},
		validate : function (res) {
			this.$refs[res].validate((valid) => {
				if (valid) {
					this.editPwd();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
    },
    editPwd : function () {
      if(this.pwdModel.old != this.pwdModel.new ){
        this.$message({
          type: "error",
          message: "两次密码不一致~"
        });
        return ;
      }
      this.loading = true ;
      this.$http.post(`/api/admin/editPwd`, { login_name : this.pwdModel.userName ,pwd : this.pwdModel.new}).then(res => {
        this.loading = false ;
        let result = res.data ;
        if(result.code == 100 ){
          this.isShow = false ;
          this.$alert('修改成功,即将为您跳转到登陆界面~', {
            confirmButtonText: '确定',
            type: 'success',
            callback: action => {
               this.logout();
            }
          });
        }
      });
    },
		openEdit(){
			this.isShow = true ;
			this.pwdModel = {} ;
			this.$refs['pwdModel'].resetFields();
		}
	},
	mounted() {
	}
}

</script>

<style scoped lang="scss">
.container {
  .title_ {
    font-style: italic;
    color: #20a0ff;
  }
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: #324057;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      //width:230px;
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 230px;
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    background: #f0f1f6;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    aside {
      flex: 0 0 230px;
      width: 230px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      flex: 0 0 230px;
      width: 230px;
    }
    .content-container {
      // background: #f1f2f7;
      flex: 1;
      // position: absolute;
      // right: 0px;
      // top: 0px;
      // bottom: 0px;
      // left: 230px;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>